<template>
  <!-- 表格页面 列表-->
  <div class="table-page-container">
    <div
      class="table-grid-page"
      :style="
        'width: 100%;' +
        (customTableHeight > 0
          ? `height:calc(100vh - ${customTableHeight}px)`
          : '')
      "
    >
      <el-table
        ref="TablePage"
        border
        :row-key="tableRowKey"
        :default-sort="{ prop: orderField, order: getOrderBy }"
        v-loading="loading"
        :data="tableData"
        :height="tableHeight"
        tooltip-effect="dark"
        :style="'width: 100%;'"
      >
        <template v-for="(item, index) in columns">
          <el-table-column
            :key="index"
            v-if="item.minWidth"
            :min-width="item.minWidth"
            :prop="item.name"
            :label="item.title"
            :align="item.align"
            :sortable="item.sortable"
            :fixed="item.fixed ? item.fixed : false"
          >
            <template slot-scope="scope">
              <ColumnModel
                :item="item"
                :scope="scope"
                :formData="formData"
                :formGrid="formGrid"
                :formRowId="formRowId"
                :gridRefreshFun="gridRefreshFun"
              />
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            v-if="!item.minWidth && item.width"
            :width="item.width"
            :prop="item.name"
            :label="item.title"
            :align="item.align"
            :sortable="item.sortable"
            :fixed="item.fixed ? item.fixed : false"
          >
            <template slot-scope="scope">
              <ColumnModel :item="item" :scope="scope" :formData="formData" />
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>

    <!-- 分页 -->
    <div
      v-if="pagination.onShow"
      class="table-pagination-page"
      :class="
        pagination.position === 'center'
          ? 'el-pagination-center'
          : pagination.position === 'right'
          ? 'el-pagination-right'
          : 'el-pagination-left'
      "
      :style="`width:${pagination.width}`"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNumber"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import ColumnModel from "./components/ColumnModel.vue";

export default {
  name: "TablePage",
  components: {
    ColumnModel,
  },
  props: {
    tableRowKey: {
      type: String,
      default: () => "id",
    },
    loading: {
      type: Boolean,
      default: () => true,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    orderField: {
      type: String,
      default: () => "",
    },
    orderBy: {
      type: String,
      default: () => "",
    },
    customTableHeight: {
      type: Number,
      default: () => 0,
    },
    formGrid: {
      type: Object,
      default: () => {},
    },
    formRowId: {
      type: Number,
      default: () => null,
    },
    gridRefreshFun: {
      type: Function,
      default: () => null,
    },
    formData: {
      type: Object,
      default: () => {},
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          onShow: true,
          position: "right",
        };
      },
    },
    fixedHead: {
      type: Boolean,
      default: () => false,
    },
    page: {
      type: Object,
      default: () => {
        return {
          pageSizes: [10, 20, 50, 100, 200, 300, 400],
          pageSize: 10,
          pageNumber: 1,
          total: 0,
        };
      },
    },
  },
  computed: {
    tableHeight: {
      get() {
        return this.fixedHead
          ? Number(
              window.innerHeight -
                (this.customTableHeight > 0 ? this.customTableHeight : 100)
            )
          : null;
      },
      set() {},
    },
    getOrderBy: {
      get() {
        return this.orderBy
          ? this.orderBy === "asc"
            ? "ascending"
            : "descending"
          : "";
      },
    },
  },
  methods: {
    // 每页显示数量改变
    handleSizeChange(val) {
      console.log(window.innerHeight);
      this.page.pageSize = val;
      this.$emit("reloadData");
    },

    // 页码改变
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.$emit("reloadData");
    },
  },
};
</script>
<style lang="scss" scoped>
.table-page-container {
  flex-grow: 1;
  min-height: 0;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;

  .el-pagination-right {
    display: flex;
    justify-content: flex-end;
    margin-left: -25%;
  }

  .el-pagination-left {
    display: block !important;
  }

  .el-pagination-center {
    display: block !important;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .table-grid-page {
    overflow: scroll;

    ::v-deep .el-table {
      overflow: scroll;
      border: 1px solid #ebeef5 !important;

      .el-table__header th {
        background-color: #d9d9d9 !important;
        border: 1px solid #cccccc;
      }

      .el-table__header-wrapper {
        background-color: #d9d9d9 !important;
      }

      ::v-deep .el-table__body-wrapper .el-table__empty-block {
        width: 100% !important;
      }
    }

    ::v-deep .el-dropdown-link {
      color: #409eff;
      font-size: 13px;
      margin-left: 5px;
    }

    ::v-deep .table-column-ellipsis {
      white-space: nowrap; /* 确保文本不会换行 */
      overflow: hidden; /* 隐藏超出容器宽度的内容 */
      text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
    }
  }

  // 隐藏伪元素（表格多出的横线）
  ::v-deep.el-table::before {
    display: none !important;
  }

  .column-svg-rotate {
    animation: tableColumnSvgRotate 2s linear infinite;
  }

  @keyframes tableColumnSvgRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

.btn-icon-click:hover {
  cursor: pointer;
}
</style>
